import React from "react";
import APP1 from "./app1/APP1.js";
// 组件首字母需要大写
import Menupage from "./menuPage/menuPage.js";
import TemplatePage from "./TemplatePage/TemplatePage.js";

import { BrowserRouter as Router, Route, Routes, NavLink } from "react-router-dom";
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}; //不写会有WARNING   Useless constructor  no-useless-constructor
  }

  changeli = (e) => {
    console.log(e, "组件通讯");
  }

  render() {
    return (
      <Router>
        <div className="header_box">
          <NavLink
            to="app"
            exact
            className={({ isActive }) => (isActive ? "active-link" : "inactive-link")}
          >
            APP1
          </NavLink>
          <NavLink
            to="menupage"
            className={({ isActive }) => (isActive ? "active-link" : "inactive-link")}
          >
            Menu
          </NavLink>
          <NavLink
            to="templatepage"
            className={({ isActive }) => (isActive ? "active-link" : "inactive-link")}
          >
            TemplatePage
          </NavLink>
        </div>

        {/* Route  必须使用标签 Routes  包裹 */}
        <Routes>
          <Route path="app" element={<APP1 name={"1231"} changelis={this.changeli} />}></Route>
          <Route path="menupage" element={<Menupage />}></Route>
          <Route path="templatepage" element={<TemplatePage />}></Route>
        </Routes>
      </Router>
    );
  }
}
